import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("你好Flutter")),
        body: Column(
          children: [
            MyApp(), // 使用自定义的MyApp组件
            MyButton(), // 使用自定义的MyButton组件
            MyText(), // 使用自定义的MyText组件
          ],
        ),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: EdgeInsets.fromLTRB(0, 60, 0, 0),
        alignment: Alignment.center, // 设置Container容器中元素的方位
        width: 200,
        height: 200,
        // transform: Matrix4.translationValues(10, 0, 0), // 设置Container容器的偏移位置
        // transform: Matrix4.rotationZ(0.2), // 设置Container容器的旋转角度
        transform: Matrix4.skewY(0.2),
        decoration: BoxDecoration(
          color: Colors.yellow, // 设置Container容器的背景颜色
          border: Border.all(
            // 设置Container容器的边框
            color: Colors.red,
            width: 2.0, // 设置边框颜色和宽度
          ),
          borderRadius: BorderRadius.circular(10), // 设置Container容器的圆角
          boxShadow: [
            BoxShadow(
              // 设置Container容器的阴影效果
              color: Colors.blue,
              blurRadius: 10,
            ),
          ],
          gradient: LinearGradient(colors: [Colors.red, Colors.yellow]),
          // gradient: RadialGradient(colors: [Colors.red, Colors.yellow]),
        ),
        child: Text(
          "欢迎使用Flutter！",
          style: TextStyle(color: Colors.black, fontSize: 20.0),
        ),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center, // 设置Container容器中元素的方位
      width: 200,
      height: 40,
      margin: EdgeInsets.fromLTRB(0, 40, 0, 0), // 设置按钮的外边距
      // padding: EdgeInsets.all(4.0), // 设置按钮的内边距
      // margin: EdgeInsets.all(10.0), // 设置按钮的外边距
      decoration: BoxDecoration(
        color: Colors.blue, // 设置按钮的背景颜色
        borderRadius: BorderRadius.circular(20), // 设置按钮的圆角
      ),
      child: Text(
        "按钮",
        style: TextStyle(
          color: Colors.white, // 设置按钮文本的颜色
          fontSize: 20,
        ),
      ),
    );
  }
}

class MyText extends StatelessWidget {
  const MyText({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      margin: EdgeInsets.fromLTRB(0, 40, 0, 0), // 设置文本的外边距
      decoration: BoxDecoration(
        color: Colors.yellow, // 设置Container容器的背景颜色
      ),
      child: Text(
        "你好，我是Flutter！你好，我是Flutter！你好，我是Flutter！你好，我是Flutter！你好，我是Flutter！你好，我是Flutter！",
        textAlign: TextAlign.left,
        overflow: TextOverflow.ellipsis, // 设置文本溢出时的处理方式
        maxLines: 1, // 设置文本的最大行数
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.w900,
          color: Colors.red,
          fontStyle: FontStyle.italic,
          letterSpacing: 2.0, // 设置字母间距
          decoration: TextDecoration.underline, // 设置文本下划线
          decorationColor: Colors.black, // 设置下划线颜色
          decorationStyle: TextDecorationStyle.dashed, // 设置下划线样式
        ),
      ),
    );
  }
}
